import React, { useEffect, useState } from "react";
import { ProductCard,PullRefresh, Tabs, Toast } from "react-vant";
import {useNavigate} from 'react-router-dom'

import axios from "axios";
const Index: React.FC = () => {
  const [list, setList] = useState<any>([]);
  const navigate=useNavigate()
  const render = () => {
    axios.get("/api/list").then((resp) => {
      setList(resp.data.list);
    });
  };
  useEffect(() => {
    render();
    
  }, []);
  const detail=(id:any)=>{
    navigate(`/detail/${id}`)
  }
  return (
    <div>
      {list.length > 0 &&
        list.map((v: any, i: any) => (
          <ProductCard
            price={v.price}
            desc={v.word}
            thumb={v.img}
            title={v.title}
            key={v.id}
            onClick={()=>detail(v.id)}
          />
        ))}
    </div>
  );
};
export default Index;
